<template>
  <div class="conten">
    <el-form
      ref="form"
      :rules="rules"
      :model="formData"
      label-width="80px"
      class="form"
    >
      <el-form-item
        label="图片"
        prop="image_url"
      >
        <Upload
          tip="建议图片比例 16:9，图片大小不能超过2MB，分辨率不能
          超过1080*1080，支持jpg、jpeg、png格式"
          :url="formData.image_url"
          @resultUpload="onUpLoad"
        ></Upload>
      </el-form-item>
      <el-form-item
        v-if="formData.url_type == 1"
        label="短剧名称"
        prop="playlet_id"
      >
        <el-select
          v-model="formData.playlet_id"
          clearable
          placeholder="请选择"
          remote
          filterable
          style="width:250px;"
        >
          <el-option
            v-for="item in optionsList.playletList"
            :key="item.value"
            :disabled="item.is_exist && item.is_exist===1?true:false"
            :label="item.label"
            :value="item.value"
          > </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="formData.url_type == 2"
        label="上架活动"
        prop="activity_id"
      >
        <el-select
          v-model="formData.activity_id"
          clearable
          placeholder="请输入活动名称"
          remote
          :remote-method="onGetActivityList"
          filterable
          style="width:250px;"
          @change="onActivityChange"
        >
          <el-option
            v-for="item in optionsList.activity"
            :key="item.id"
            :label="item.name + '/' + item.id"
            :value="item.id"
          > </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer rowFlex">
      <div class="btns">
        <el-button
          class="btn"
          @click="close"
        >取 消</el-button>
        <el-button
          class="btn"
          type="primary"
          :loading="loading"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from '@/common/component/upload.vue'
import { POST_mini_app_playlet_rollImageSave } from '@/api/appContent/theater'
import { commonData } from '@/api/common'
import { templateList } from '@/api/active'

export default {
  components: {
    Upload
  },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        mini_app_id: localStorage.mini_app_id,
        playlet_id: '',
        image_url: '',
        activity_id: '',
        url_type: 1
      },
      optionsList: {
        playletList: [],
        activity: []
      },
      rules: {
        activity_id: [{ required: true, message: '请选择活动', trigger: 'blur' }],
        playlet_id: [{ required: true, message: '请选择短剧', trigger: 'blur' }],
        image_url: [{ required: true, message: '请选择图片', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.onGetPlayletList()
    console.log(this.data)
    this.formData.playlet_id = this.data.playlet_id * 1 || ''
    this.formData.url_type = this.data.url_type * 1 || '1'
    this.formData.activity_id = this.data.activity_id || ''
    this.onGetActivityList()
    // this.formData.id = this.data.id || ''
    this.data.id ? (this.formData.id = this.data.id) : null
    this.formData.image_url = this.data.image_url || ''
    console.log(this.formData)
  },
  methods: {
    close() {
      this.$emit('cancel')
    },
    onActivityChange(value = '') {
      const indexActivity = this.optionsList.activity.find((item) => item.id == value)
      templateList().then((res) => {
        this.formData.image_url = res.data.find((item) => item.id == indexActivity.template).banner
        console.log(this.formData.image_url)
      })
    },
    playletSelect(value) {
      this.formData.playlet_id = value
    },
    async onSubmit() {
      this.loading = true
      const params = {
        ...this.formData,
        activity_id: this.formData.activity_id
      }

      this.$refs.form.validate((valid) => {
        if (valid) {
          POST_mini_app_playlet_rollImageSave(params).then((res) => {
            if (res.status_code == 1) {
              this.$message.success(res.msg)
              this.$emit('ok')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = false
    },
    async onGetPlayletList() {
      const res = await commonData({
        type: 'miniAppPlaylet',
        mini_app_id: this.formData.mini_app_id
      })
      if (res.status_code == 1) {
        this.optionsList.playletList = res.data.data
      }
    },
    async onGetActivityList(value = '') {
      const res = await commonData({
        type: 'activity',
        activity_type: 1,
        mini_app_id: this.formData.mini_app_id,
        value: value
      })
      if (res.status_code == 1) {
        this.optionsList.activity = res.data.data
      }
    },
    onUpLoad(url, type) {
      console.log(url)
      this.formData.image_url = url
    }
  }
}
</script>
<style lang="scss" scoped>
.conten {
  width: 400px;
  .form {
    padding: 20px;
  }
}
</style>